<template>
  <view class="withdrawal-records">
    <fui-tabs center  :tabs="tabs" @change="change"></fui-tabs>
    <view>
        <fui-card v-if="dataList && dataList.length > 0" :margin="['32rpx', '32rpx']" :title="type[item.type]" :tag="item.createTime" v-for="item in dataList" :key="item.id">
          <view class="fui-card__content">
              <view class="money">
                  {{(item.money / 100).toFixed(2)}}元
              </view>
              <view class="status" :class="item.statusId === 1 ? 'status-color-have'
               : item.statusId === 2 ? 'status-color-fail' : 'status-color-success' ">{{tabs[item.statusId]}}</view>
          </view>
        </fui-card>
      <NoData v-else/>
    </view>
    <fui-divider backgroundColor="#fff" v-if="!reachStatus" text="没有更多了"></fui-divider>
  </view>
</template>

<script setup lang="ts">
import NoData from "@/components/NoData/NoData.vue";
import dyWithdrawalService from "@/api/dyWithdrawalService";
const tabs = ref(['全部', '审核中', '审核失败',"审核通过"])
const defTabIndex = ref(0)
const type = ref(['支付宝','微信','银行卡'])
const pageNo = ref(1)
const pageSize = ref(10)
const dataList = ref()
const reachStatus = ref(true)
const change = (e:any)=>{
  pageNo.value = 1
  defTabIndex.value = e.index
  reachStatus.value = true
  dataList.value = null
  getWithdrawalRecords()
}
const getWithdrawalRecords =async ()=>{
  if(reachStatus.value){
    uni.showLoading()
    const {success,result} = await dyWithdrawalService.getWithdrawalRecords({
      type:defTabIndex.value,
      pageNo:pageNo.value,
      pageSize:pageSize.value
    })
    if(success){
      dataList.value ? dataList.value =  dataList.value.concat(result) : dataList.value = result 
      pageNo.value +=1;
      if(result.length < pageSize.value){
        reachStatus.value = false
      }
      uni.hideLoading()
    }
  }
}
onReachBottom(()=>{
  getWithdrawalRecords()
})
onLoad(()=>{
  getWithdrawalRecords()
})

</script>

<style lang="scss" scoped>
.withdrawal-records{
    padding: 28rpx 0;
    .fui-card__content{
      display: flex;
      padding: 28rpx;
      justify-content: space-between;
      .money{
        font-weight: bolder;
      }
      .status{
        font-size: 23rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        padding: 0 10rpx;
        color: white;
        border-radius: 8rpx;
      }
      .status-color-have {
        background: linear-gradient(to right, #e1b6fd, #c298fa);
      }
      .status-color-fail {
        background: linear-gradient(to right, #fdcab6, #fa98d1);
        color: red;
      }
      .status-color-success {
        background: linear-gradient(to right, #b6fdbf, #98f3fa);
        color: green;
      }
    }
}


</style>
